<template>
	<view class="shaixuan-box" @touchmove.stop.prevent="moveHandle">
		<view class="filteroption-content" :style="{'background':bg}">
			<view :class="selcetOption[index]?'selectstyle':'nomarlstyle'" v-for="(item,index) in sortType" :key="index"
				@click="changeFilter(index)">
				<view>{{item}}</view>
				<image v-if="selcetOption[index]" class="direction-icon"
					src="https://qiniu-cdn.maeiyun.com/imgs/hotel/top.png" mode=""></image>
				<image v-else class="direction-icon" src="https://qiniu-cdn.maeiyun.com/imgs/down.png" mode=""></image>
			</view>
			<view :class="current == 3?'selectstyle':'nomarlstyle'" @click="changeFilter(3)">
				<image v-if="current == 3" src="https://qiniu-cdn.maeiyun.com/imgs/hotel/hsai-s.png" mode=""></image>
				<image v-else src="https://qiniu-cdn.maeiyun.com/imgs/hotel/shai.png" mode=""></image>
				<view>筛选</view>
			</view>
		</view>
		<view class="mask" v-if="isShow" @click.stop="isShow= false"></view>
		<view class="options-list" v-if="isShow">
			<view class="option-swiper">
				<view class="option-swiper-item" v-if="current == 0">
					<view class="options">
						<view :class="selcetOption[0] == item.id?'item-option select-item-option':'item-option'"
							v-for="(item,index) in option1" :key="index" @click="chooseOption1(item)">
							<view>{{item.name}}</view>
							<image v-if="selcetOption[0] == item.id" src="../../static/search/ok.png" mode=""></image>
						</view>

					</view>
				</view>
				<view class="option-swiper-item" @touchmove="stopTouch" v-if="current == 1">
					<view class="swiper-item">
						<view class="juli-content">
							<view class="juli-title">距<text>我</text>直线距离</view>
							<view class="juli-list">
								<view :class="selcetOption[1] == item.id?'item-juli select-item-juli':'item-juli'"
									v-for="(item,index) in juliList" :key="index" @click="chooseOption2(item)">
									{{item.name}}
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="option-swiper-item" v-if="current == 2">
					<view class="swiper-item">
						<view class="juli-content">
							<view class="price-section">
								<view>¥1</view>
								<view>¥500以上</view>
							</view>
							<slider-range :value="priceValue" :min="0" :max="500" :step="10" :bar-height="3"
								:block-size="26" background-color="#EEEEF6" active-color="#FF6B00" :format="format"
								:decorationVisible="true" @change="handleRangeChange"></slider-range>
							<view class="juli-list">
								<view
									:class="selcetOption[2] === item.id?'item-juli price-item select-item-juli':'item-juli price-item'"
									v-for="(item,index) in priceList" :key="index" @click="chooseOption3(item,index)">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="roomChoosePopup" type="right">
			<view>
				<view class="popup-content">
					<view class="screening-condition">
						<view class="screening-title">酒店星级</view>
						<view class="type-lists">
							<uni-grid :column="2" :highlight="false" @change="change1" :square="false"
								:showBorder="false">
								<uni-grid-item v-for="(item, index) in start" :index="index" :key="index">
									<view style="margin-right: 20rpx;" :class="item.checked?'type-cate type-cate-select':'type-cate'">
										{{item.text}}
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
					</view>
					<view class="screening-condition">
						<view class="screening-title">品牌连锁</view>

						<view :class="iszhan1?'expanded':'type-lists'">
							<!-- <view class="type-title-lines">
								<view>经济型</view>
								<view @click="iszhan1 =!iszhan1">展开</view>
							</view> -->
							<uni-grid :column="3" :highlight="false" @change="change2" :square="false"
								:showBorder="false">
								<uni-grid-item v-for="(item, index) in catelist" :index="index" :key="index">
									<view :class="item.checked?'type-cate type-cate-select':'type-cate'">
										{{item.name}}
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
					</view>
					<view class="choose-btns">
						<view class="chongzhi" @click="reset">重置</view>
						<view class="confirm" @click="affirm">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import SliderRange from '@/components/primewind-sliderrange/index'
	import publicData from '@/otherpages/hotel/public/public.js'
	export default {
		name: "hotelSearchBox",
		components: {
			SliderRange
		},
		props: {
			bg: {
				type: String,
				default: '#F5F7F8'
			}
		},
		data() {

			return {
				sortType: [
					'推荐排序',
					'位置距离',
					'价格'
				],
				isShow: false,
				current: -1,
				option1: [{
						id: 0,
						name: '智能排序'
					},
					{
						id: 1,
						name: '低价优先'
					},
					{
						id: 2,
						name: '高价优先'
					},
					{
						id: 3,
						name: '好评优先'
					},
					{
						id: 4,
						name: '距离优先'
					}
				],
				selcetOption: [0, '', false], // 排序   距离   价格
				juliList: [{
						id: 0.5,
						name: '≤500m'
					},
					{
						id: 1,
						name: '≤1km'
					},
					{
						id: 2,
						name: '≤2km'
					},
					{
						id: 8,
						name: '≤8km'
					},
					{
						id: 10,
						name: '≤10km'
					},
				],
				// 50以下、150-300、300-500、500以上几个分类
				priceList: [{
						id: '150以下',
						value: [0, 150],
						name: '150以下'
					},
					{
						id: '150-300',
						value: [150, 300],
						name: '150-300'
					},
					{
						id: '300-500',
						value: [300, 500],
						name: '300-500'
					},
					{
						id: '500以上',
						value: [500,500],
						name: '500以上'
					}
				],
				sliderNumber: 150,
				cateid: 0,
				iszhan1: true,
				iszhan2: false,
				priceValue: [0, 150],
				start: [{
						text: '二星级以下',
						id: 2,
						checked: false
					},
					{
						text: '三星级',
						id: 3,
						checked: false
					},
					{
						text: '四星级',
						id: 4,
						checked: false
					},
					{
						text: '五星级',
						id: 5,
						checked: false
					}
				],
				startList: [],
				catelist: [], //品牌列表
				selectCateList: []

			}
		},
		mounted() {
			publicData.screeningCondition.minPrice = ''
			publicData.screeningCondition.maxPrice =''
			publicData.screeningCondition.sort = 0
			publicData.screeningCondition.range = 5000
			publicData.screeningCondition.hotelStars = '1,2,3,4,5,6'
			this.selcetOption[0] = this.option1[0].id
			this.getHotelCate()
		},
		methods: {
			triggerEvent() {
				this.$emit('searchResult')
			},
			getHotelCate() {
				let that = this
				this.request.httpTokenRequest({
					url: "hotel/getHotelCategory",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						res.data.map(item => {
							item.checked = false
							that.catelist.push(item)
						})
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			stopTouch() {
				return false
			},
			format(val) {
				return val + '￥'
			},
			handleRangeChange(e) {
				this.rangeValue = e
				if(e[0] == 490){
					publicData.screeningCondition.minPrice = '500'
					publicData.screeningCondition.maxPrice = ''
					this.sortType[2] = '500以上'
				}else{
					publicData.screeningCondition.minPrice = e[0]
					publicData.screeningCondition.maxPrice = e[1]
					this.sortType[2] = e[0]+'-'+e[1]
				}
				this.triggerEvent()
			},
			changeFilter(type) {
				this.current = type
				if (this.current == 3) {
					// console.log(type)
					this.isShow = false
					this.$refs.roomChoosePopup.open('right')
				} else {
					this.isShow = true
				}

			},
			change1(data) { //星级筛选 
				var index = data.detail.index
				this.start[index].checked = !this.start[index].checked
				if (this.start[index].checked) {
					this.startList.push(this.start[index].id)
				} else {
					this.startList.splice(this.startList.indexOf(this.start[index].id), 1)
				}
				this.startList = Array.from(new Set(this.startList))

			},
			change2(data) { // 品牌
				var index = data.detail.index
				this.catelist[index].checked = !this.catelist[index].checked
				if (this.catelist[index].checked) {
					this.selectCateList.push(this.catelist[index].name)
				} else {
					this.selectCateList.splice(this.selectCateList.indexOf(this.catelist[index].name), 1)
				}
				this.selectCateList = Array.from(new Set(this.selectCateList))

			},
			chooseOption1(item) { // 排序
				if(this.selcetOption[0] && this.selcetOption[0] == item.id){
					this.$set(this.selcetOption, 0, 0)
					publicData.screeningCondition.sort = 0
					this.sortType[0] = '推荐排序'
					
				}else{
					this.sortType[0] = item.name
					this.$set(this.selcetOption, 0, item.id)
					publicData.screeningCondition.sort = item.id
				}
				this.triggerEvent()
			},
			chooseOption2(item) { //距离
				if(this.selcetOption[1] && this.selcetOption[1] == item.id){
					this.$set(this.selcetOption, 1, '')
					this.sortType[1] = '位置距离'
					publicData.screeningCondition.range = ''
				}else{
					this.sortType[1] = item.name
					this.$set(this.selcetOption, 1, item.id)
					publicData.screeningCondition.range = item.id
				}
				this.triggerEvent()
			},
			chooseOption3(item,index) { //价格
				// console.log(item,index)
				if(this.selcetOption[2] && this.selcetOption[2] == item.name){
					this.$set(this.selcetOption, 2, false)
					publicData.screeningCondition.minPrice = ""
					publicData.screeningCondition.maxPrice = ''
					this.sortType[2] = '价格'
				}else{
					this.sortType[2] = item.name
					this.$set(this.selcetOption, 2, item.name)
					this.priceValue = item.value
					publicData.screeningCondition.minPrice = item.value[0]
					publicData.screeningCondition.maxPrice = item.value[1]
					if(index == 0){
						publicData.screeningCondition.maxPrice = 150
					}
					if(index == 3){
						publicData.screeningCondition.minPrice = ''
					}
				}
				this.triggerEvent()
			},
			reset() {
				this.start.map(item => {
					item.checked = false
				})
				this.catelist.map(item => {
					item.checked = false
				})
				this.selectCateList = []
				this.startList = []
				publicData.screeningCondition.brands = ''
				publicData.screeningCondition.hotelStars = ''
				this.triggerEvent()
				this.$refs.roomChoosePopup.close()
			},
			affirm() {
				publicData.screeningCondition.brands = this.selectCateList.toString()
				publicData.screeningCondition.hotelStars = this.startList.toString()
				this.triggerEvent()
				this.$refs.roomChoosePopup.close()
			},
			moveHandle() {}
		}
	}
</script>

<style lang="scss">
	page {}

	.shaixuan-box {
		position: relative;
	}

	.mask {
		background-color: rgba(0, 0, 0, .6);
		height: 100vh;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;

	}

	.filteroption-content {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		z-index: 99;
		position: relative;
		padding-top: 20rpx;

		view {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			// color: #212125;

		}

		.nomarlstyle {
			color: #212125;
		}

		.selectstyle {
			color: #EF5233 !important;
		}

		image {
			width: 23rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}

		.direction-icon {
			width: 13rpx;
			height: 8rpx;
			margin-left: 10rpx;
		}

	}

	.options-list {
		width: 100vw;
		position: absolute;
		top: 60rpx;
		left: 0;
		right: 0;
		z-index: 99;
		border-top: 1rpx solid #626263;

		.option-swiper {
			width: 100vw;

			.option-swiper-item {
				background-color: #F5F7F8;
				width: 100vw;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				padding-top: 30rpx;
				box-sizing: border-box;
				padding-bottom: 10rpx;

				.item-option {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 15rpx 30rpx;
					margin-bottom: 20rpx;

					image {
						width: 34rpx;
						height: 30rpx;
					}
				}
				.select-item-option {
					color: #EF5233;
				}
				//
				.juli-content {
					padding: 30rpx;
					.price-section {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #E54B42;
					}
					.juli-title {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #1B1B1B;
						margin-bottom: 20rpx;

						text {
							color: #EF5233;
						}
					}
					.juli-list {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item-juli {
							padding: 12rpx 24rpx;
							background-color: #E9E9E9;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #545454;
							border-radius: 10rpx;
							// margin-right: 10rpx;
							margin-bottom: 20rpx;
						}

						.price-item {
							padding: 12rpx 10rpx;
						}

						.select-item-juli {
							background: rgba(239, 82, 51, 0.1);
							border-radius: 10rpx;
							border: 1rpx solid #EF5233;
							color: #EF5233;
						}
					}
				}





			}
		}
	}

	.sanjiao {
		width: 0;
		height: 0;
		border-top: 8rpx solid #000000;
		border-right: 8rpx solid transparent;
		border-left: 8rpx solid transparent;
		margin-left: 10rpx;
	}

	.sanjiaoselcet {
		width: 0;
		height: 0;
		border-top: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		border-left: 8rpx solid transparent;
		border-bottom: 8rpx solid #EF5233;
		margin-left: 10rpx;
	}

	//筛选弹窗
	.popup-content {
		width: 511rpx;
		padding-top:calc(var(--status-bar-height) + 10px);
		background-color: #fff;
		height: 100vh;

		.screening-condition {
			padding: 33rpx;
			border-bottom: 30rpx solid #D8D8D8;

			.screening-title {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}

			.type-lists {
				margin-top: 30rpx;
				max-height: 250rpx;
				overflow: hidden;

				.type-title-lines {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					margin-bottom: 20rpx;
				}

				.type-cate {
					padding: 13rpx 10rpx;
					border: 2rpx solid #D7D7D7;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #181818;
					border-radius: 400px;
					margin: 0 3rpx 10rpx 0;
					text-align: center;
				}

				.type-cate-select {
					border: 2rpx solid #EF5233;
					background-color: #FDEDEA;
					color: #EF5233;
				}
			}

			.expanded {
				margin-top: 30rpx;
				height: auto !important;
				transition: height 1s ease-in-out;

				.type-title-lines {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					margin-bottom: 20rpx;
				}

				.type-cate {
					padding: 13rpx 10rpx;
					border: 2rpx solid #D7D7D7;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #181818;
					border-radius: 400px;
					margin: 10rpx;
					
					text-align: center;
				}

				.type-cate-select {
					border: 2rpx solid #EF5233;
					background-color: #FDEDEA;
					color: #EF5233;
				}
			}


		}

		//
		.choose-btns {
			background: url('../../static/jishi/btn-bg.png')no-repeat;
			background-size: 100% 100%;
			width: 448rpx;
			height: 76rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			bottom: 30rpx;
			left: 33rpx;

			view {
				width: 50%;
				text-align: center;
			}

			.chongzhi {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.confirm {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>